<template>
  <div class="loginbox">
    <div class="menbox">
      <div class="tool menitem" @click="tipshow = true">
        <img src="@/images/tips.png" alt="" class="normal" />
        <img src="@/images/tipac.png" alt="" class="active" />
      </div>
      <div class="tool menitem" @click="ylshow = !ylshow">
        <img src="@/images/sy.png" alt="" class="normal" v-show="!ylshow" />
        <img src="@/images/syac.png" alt="" class="active" v-show="!ylshow" />
        <img src="@/images/syac.png" alt="" v-show="ylshow" />
      </div>
      <div class="tool menitem" @click="closeFn">
        <img src="@/images/close.png" alt="" class="normal" />
        <img src="@/images/closeac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 提示 -->
    <div class="tipsmain" v-if="tipshow">
      <!-- 背景 -->
      <img src="@/images/ltipsbj.png" alt="" class="ltipsbj" />
      <!-- 内容 -->
      <img src="@/images/ltipsnr.png" alt="" class="ltipsnr" />
      <!-- 关闭 -->
      <img
        src="@/images/ltipsclose.png"
        alt=""
        class="ltipsclose"
        @click="tipshow = false"
      />
    </div>

    <!-- 音量控制器 -->
    <div class="ylkzbox" v-show="ylshow">
      <!-- 背景 -->
      <img src="@/images/yltjbj.png" alt="" class="yltjbj" />
      <!-- 标题框 -->
      <div class="ylbtbox">
        <!-- 背景 -->
        <img src="@/images/yltjbtbj.png" alt="" />
        <!-- 题目 -->
        <div class="yltitle">音量调节</div>
      </div>
      <!-- 背景音乐 -->
      <div class="bjybox">
        <div class="bjytitle">背景音乐</div>
        <div class="xlb"><img src="@/images/xlb.png" alt="" /></div>
        <div class="volume-item">
          <!-- 音量滑块：范围 0~100，双向绑定 bgmVolume -->
          <el-slider
            class="custom-volume-slider"
            v-model="bgmVolume"
            :show-tooltip="false"
            @input="updateVolume('bgm')"
          ></el-slider>
          <span>{{ bgmVolume }}%</span>
        </div>
      </div>
      <!-- 提示音乐 -->
      <div class="tsybox">
        <div class="bjytitle">提示声音</div>
        <div class="xlb"><img src="@/images/xlb.png" alt="" /></div>
        <div class="volume-item">
          <!-- 音量滑块：范围 0~100，双向绑定 bgmVolume -->
          <el-slider
            class="custom-volume-slider"
            v-model="tipVolume"
            :show-tooltip="false"
            @input="updateVolume('tip')"
          ></el-slider>
          <span>{{ tipVolume }}%</span>
        </div>
      </div>
    </div>
    <!-- 音频标签：通过 ref 引用，移除自动播放 -->
    <!-- <audio
      ref="bgmAudio"
      src="https://m701.music.126.net/20250925172738/8cdb4c2985bb2e023aef111065708e4f/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/60407073831/026e/f74c/4ea6/c83564be25b32f6df21381bb7630f42c.mp3"
      loop
    ></audio> -->
    <audio ref="tipAudio" :src="tipsrc" @ended="bfwc"></audio>

    <!-- 全屏和横屏提示对话框 -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="showOrientationDialog"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <p>{{ dialogMessage }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleOrientationConfirm"
          >确定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return {
      tipshow: false,
      ylshow: false,
      isMobile: false,
      showOrientationDialog: false,
      dialogMessage: '',
      checkInterval: null,
      tipsrc: '',
      bgmVolume: 36, // 初始背景音乐音量（对应 36%）
      tipVolume: 70 // 初始提示声音音量（对应 70%）
    }
  },

  mounted() {
    // 检测是否为移动设备
    this.checkIsMobile()

    // 如果是移动设备，尝试全屏和旋转
    if (this.isMobile) {
      // 延迟执行，确保DOM加载完成
      setTimeout(() => {
        this.enterFullscreen()
        this.lockLandscape()
      }, 1000)
    }
    // 启动定期检查
    this.startCheckingOrientation()
  },

  beforeDestroy() {
    // 清除检查定时器
    if (this.checkInterval) {
      clearInterval(this.checkInterval)
    }
    const audio = this.$refs.tipAudio
    audio.pause()
    this.tipsrc = null
    // 清理提示音频事件
  },

  methods: {
    // 停止播放
    playAudioStop() {
      const audio = this.$refs.tipAudio
      audio.pause()
      this.tipsrc = null
    },
    // 修复后的播放提示音频方法：核心修改
    playAudio(src) {
      const audio = this.$refs.tipAudio
      audio.pause()
      this.tipsrc = null
      console.log('播放声音文件', src)

      // 1. 校验传入的 src 是否有效，无效直接返回并提示
      if (!src || typeof src !== 'string') {
        console.error('playAudio 错误：传入的音频地址无效', src)
        return
      }

      if (!audio) {
        console.error('playAudio 错误：未找到 tipAudio 元素')
        return
      }
      this.tipsrc = src
      this.$nextTick(() => {
        audio.play()
      })
    },
    bfwc() {
      this.$emit('bfwc', this.tipsrc)

      const audio = this.$refs.tipAudio
      audio.pause()
      console.log('播放完成')
    },
    updateVolume(type) {
      const audioRef =
        type === 'bgm' ? this.$refs.bgmAudio : this.$refs.tipAudio
      const volume =
        type === 'bgm' ? this.bgmVolume / 100 : this.tipVolume / 100
      if (audioRef) {
        audioRef.volume = volume // 设置音频音量（0~1）
      }
    },
    // 开始定期检查屏幕状态
    startCheckingOrientation() {
      // 每3秒检查一次
      this.checkInterval = setInterval(() => {
        this.checkScreenState()
      }, 3000)
    },

    // 检查屏幕状态
    checkScreenState() {
      const isFullscreen = this.isFullscreen()
      const isLandscape = this.isLandscape()

      // 移动设备下检查横屏和全屏
      if (this.isMobile) {
        if (!isLandscape && !isFullscreen) {
          this.dialogMessage =
            '为获得最佳体验，请将设备旋转为横屏并进入全屏模式'
          this.showOrientationDialog = true
        } else if (!isLandscape) {
          this.dialogMessage = '为获得最佳体验，请将设备旋转为横屏模式'
          this.showOrientationDialog = true
        } else if (!isFullscreen) {
          this.dialogMessage = '为获得最佳体验，请进入全屏模式'
          this.showOrientationDialog = true
        }
      } else {
        // 非移动设备只检查全屏
        if (!isFullscreen) {
          this.dialogMessage = '为获得最佳体验，请进入全屏模式'
          this.showOrientationDialog = true
        }
      }
    },

    // 检查是否为全屏状态
    isFullscreen() {
      return !!(
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      )
    },

    // 检查是否为横屏状态
    isLandscape() {
      // 对于移动设备，检查屏幕方向
      if (this.isMobile) {
        if (screen.orientation) {
          return screen.orientation.type.includes('landscape')
        } else {
          //  fallback for older browsers
          return window.innerWidth > window.innerHeight
        }
      }
      return true
    },

    // 处理确定按钮点击
    handleOrientationConfirm() {
      this.showOrientationDialog = false
      // 尝试进入全屏和横屏
      this.enterFullscreen()
      if (this.isMobile) {
        this.lockLandscape()
      }
    },

    // 检测是否为移动设备
    checkIsMobile() {
      const userAgent = navigator.userAgent.toLowerCase()
      const mobileDevices = /iphone|ipad|ipod|android|blackberry|windows phone/g
      this.isMobile = mobileDevices.test(userAgent)
    },

    // 进入全屏模式
    enterFullscreen() {
      const docEl = document.documentElement

      // 各种浏览器的全屏API
      const requestFullscreen =
        docEl.requestFullscreen ||
        docEl.mozRequestFullScreen ||
        docEl.webkitRequestFullscreen ||
        docEl.msRequestFullscreen

      if (requestFullscreen) {
        requestFullscreen
          .call(docEl)
          .then(() => console.log('进入全屏成功'))
          .catch((err) => console.error('进入全屏失败:', err))
      }
    },

    // 退出全屏
    exitFullscreen() {
      const exitFullscreen =
        document.exitFullscreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen

      if (exitFullscreen) {
        exitFullscreen
          .call(document)
          .then(() => console.log('退出全屏成功'))
          .catch((err) => console.error('退出全屏失败:', err))
      }
    },

    // 锁定屏幕为横屏
    lockLandscape() {
      if (screen.orientation && screen.orientation.lock) {
        // 尝试锁定为横屏模式
        screen.orientation
          .lock('landscape')
          .then(() => console.log('屏幕已锁定为横屏'))
          .catch((err) => console.error('屏幕锁定失败:', err))
      } else {
        console.warn('当前浏览器不支持屏幕方向锁定')
        // 可以在这里添加提示用户手动旋转屏幕的逻辑
      }
    },

    closeFn() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    }
  }
}
</script>

<style scoped>
.loginbox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.logobj {
  width: 1920px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.startbox {
  position: absolute;
  left: 50%;
  bottom: 180px;
  transform: translate(-50%, 0);
}
.ltipsclose {
  width: 32px;
  height: 33px;
}
.startbox img {
  width: 250px;
  height: 66px;
}
.menbox {
  width: 214px;
  height: 62px;
  position: absolute;
  right: 36px;
  top: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menitem img {
  width: 54px;
  height: 62px;
}
.tipsmain {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translate(-50%, 0);
}
.ltipsbj {
  width: 392px;
  height: 347px;
  position: relative;
}
.ltipsclose {
  width: 32px;
  height: 33px;
  position: absolute;
  top: 11px;
  right: 0px;
  cursor: pointer;
}
.ltipsnr {
  width: 306px;
  height: 254px;
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}
/* 音量控制器 */
.ylkzbox {
  position: absolute;
  top: 106px;
  right: 36px;
}
.yltjbj {
  width: 329px;
  height: 171px;
  position: relative;
}
.ylbtbox {
  position: absolute;
  left: 0px;
  top: 8px;
}
.ylbtbox img {
  width: 110px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.yltitle {
  width: 110px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  font-weight: bold;
  font-size: 18px;
  color: #ffe8c2;
  position: absolute;
  top: -2px;
  left: 0;
}
.bjybox {
  width: 295px;
  height: 36px;
  display: flex;
  position: absolute;
  top: 57px;
  left: 18px;
}
.tsybox {
  width: 295px;
  height: 36px;
  display: flex;
  position: absolute;
  top: 107px;
  left: 18px;
}
.bjytitle {
  height: 36px;
  font-size: 18px;
  color: #ffffff;
  padding: 0px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xlb {
  margin: 0px 2px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xlb img {
  width: 12px;
  height: 19px;
  display: block;
  margin-top: 1px;
}
.volume-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  width: 185px;
  margin-left: 8px;
  height: 36px;
  padding-right: 5px;
  box-sizing: border-box;
}
.volume-item span {
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  display: block;
  max-width: 70px;
  text-align: center;
  margin-left: 8px;
}
.custom-volume-slider {
  width: 100%;
}
::v-deep .custom-volume-slider .el-slider__button {
  width: 8px;
  height: 8px;
  border: 1px solid rgb(233, 233, 233);
}
::v-deep .custom-volume-slider .el-slider__bar {
  height: 4px;
  background-color: #13dfc5;
}
::v-deep .custom-volume-slider .el-slider__runway {
  height: 4px;
  background-color: #718895;
}
</style>
